<template>
    <div class="dataM">
        <div class="dataM_d flex" v-for="item in data">
            <img class="dataM_d_img" :src="item.src" alt="">
            <div class="dataM_d_right">
                <p class="dataM_d_right_p1">{{ item.number }}</p>
                <p class="dataM_d_right_p">{{ item.unit }}</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ["data"],
    data() {
        return {
        }
    },
    mounted() {
        // this.area()
    },
    methods: {
    }
}
</script>
<style lang="scss" scoped>
.dataM {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .dataM_d {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        .dataM_d_img {
            width: 64px;
            height: 65px;
            margin-right: 10px;
        }

        .dataM_d_right {
            width: 105px;

            .dataM_d_right_p1 {
                margin: 0;
                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                font-size: 30px;
                color: linear-gradient(0deg, #E5FAFD 0.634765625%, #15B0EA 100%);
                // background: linear-gradient(0deg, #E5FAFD 0.634765625%, #15B0EA 100%);
            }

            .dataM_d_right_p {
                margin: 0;
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #D0E5F5;

                .dataM_d_right_p_span {
                    font-family: DIN;
                    font-weight: 500;
                    font-size: 24px;
                    color: #D0E5F5;
                }
            }
        }
    }
}
</style>